<template>
  <a-modal
    :title="formTile + '角色'"
    :visible="true"
    width="60%"
    :footer="null"
    @cancel="reset"
  >
    <div class="main">
      <a-card style="margin-top:5px">

        <a-form
          layout="inline"
          :form="form"
          @submit="handleSubmit"
        >
          <a-row>
            <a-form-item label="角色名称">
              <a-input
                placeholder="请输入角色名称"
                :maxLength="40"
                allow-clear
                v-decorator="[
                  `name`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入角色名称'
                      }
                    ]
                  }
                ]"
              />
            </a-form-item>
          </a-row>
          <a-col
            :span="24"
            :style="{ textAlign: 'right' }"
          >
            <a-button @click="reset">
              取消
            </a-button>
            <a-button
              :style="{ marginLeft: '8px' }"
              type="primary"
              html-type="submit"
            >
              保存
            </a-button>

          </a-col>

          </a-row>

        </a-form>

      </a-card>
    </div>

  </a-modal>
</template>

<script>
import { postAction } from '@/api/manage'
import { pattern } from '@api/pattern/index'
export default {
  components: {},

  props: {
    account: {
      type: Object,
      default: null,
    },
  },

  data() {
    return {
      urlKey: 'account',
      id:'',
      patt: 'api/gateway/basemgt-op/',
      loading: true,
      form: this.$form.createForm(this),
      showTable: false,
    }
  },

  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'account' })
  },

  created() {
    const { account } = this.$props
    if (account) {
      this.formTile = '编辑'
       this.$nextTick(() => {
        this.form.setFieldsValue({ name: account.name })
      })
      this.id = account.id
    } else {
      this.formTile = '新增'
      this.showTable = true
    }
  },
  mounted() {
  },
  methods: {
    reset() {
      this.form.resetFields()
      this.$emit('close')
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.submit(values)
        }
      })
    },
    submit(values) {
        var params = {
          name:values.name,
          roleId:this.id
        }
      const api = this.showTable ? `${this.patt}/role/save` : `${this.patt}/role/update`
      this.$http({
        url: api,
        method: 'post',
        data: params,
      }).then((data) => {
        if (data.code == 200) {
          this.$message.success(this.showTable ? '新建帐号成功！' : '修改成功！')
          this.reset()
        } else {
          this.$message.warning(data.msg)
        }
      })
    },
  },
}
</script>

<style scoped lang="less">
.main {
  // display: flex;
}
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  // margin-bottom: 20px;
}
.ml-20 {
  margin-left: 20px;
}
</style>
